<template>
  <el-card
    header="pro-data-chart场景:地图"
    shadow="hover"
    :body-style="{ 'background-image': bgJpg }"
  >
    <pro-action @handler="updateData" text="更新数据" />
    <!-- 图表控件 -->
    <pro-data-chart :createChartOptions="createChartOption" :height="380" />
    <!-- 根据这个重构tooltip -->
    <div ref="charttooltip" style="display: none">
      <div class="g2-tooltip">
        <div class="g2-tooltip-title">{{ tooltipData.title }}</div>
        <ul class="g2-tooltip-list">
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background: #000"></span>
            <span class="g2-tooltip-name">值</span>:
            <span class="g2-tooltip-value">{{
              tooltipData.data ? tooltipData.data[0].value : ""
            }}</span>
          </li>
          <li class="g2-tooltip-list-item">
            <span class="g2-tooltip-marker" style="background: #000"></span>
            <span class="g2-tooltip-name">值2</span>:
            <span class="g2-tooltip-value">{{
              tooltipData.data ? tooltipData.data[0].data.add : ""
            }}</span>
          </li>
        </ul>
      </div>
    </div>
  </el-card>
</template>
<script>
/**
 * 这是一个地图事例说明:
 */
import ProDataChart from "mars-pro/packages/pro-data-chart";
import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
import { get, post, postForm } from "mars-pro/src/pro/request";

//中国省、直辖市地图数据
import ChinaGeoData from "./china-geo.json";
import DataSet from "@antv/data-set";
//地图黑色北京
import bgJpg from "./map-bg.jpg";

const initDatas = [
  { name: "北京", value: 0, add: 10 },
  { name: "天津", value: 0, add: 11 },
  { name: "河北", value: 0, add: 12 },
  { name: "山西", value: 0, add: 13 },
  { name: "内蒙古", value: 0, add: 14 },
  { name: "辽宁", value: 0, add: 15 },
  { name: "吉林", value: 0, add: 16 },
  { name: "黑龙江", value: 0, add: 17 },
  { name: "上海", value: 0, add: 18 },
  { name: "江苏", value: 0, add: 19 },
  { name: "浙江", value: 0, add: 20 },
  { name: "安徽", value: 0, add: 21 },
  { name: "福建", value: 0, add: 22 },
  { name: "江西", value: 0, add: 23 },
  { name: "山东", value: 0, add: 24 },
  { name: "河南", value: 0, add: 25 },
  { name: "湖北", value: 0, add: 26 },
  { name: "湖南", value: 0, add: 27 },
  { name: "广东", value: 0, add: 28 },
  { name: "广西", value: 0, add: 29 },
  { name: "海南", value: 0, add: 30 },
  { name: "重庆", value: 0, add: 31 },
  { name: "四川", value: 0, add: 32 },
  { name: "贵州", value: 0, add: 33 },
  { name: "云南", value: 0, add: 34 },
  { name: "西藏", value: 0, add: 35 },
  { name: "陕西", value: 0, add: 36 },
  { name: "甘肃", value: 0, add: 37 },
  { name: "青海", value: 0, add: 38 },
  { name: "宁夏", value: 0, add: 39 },
  { name: "新疆", value: 0, add: 40 },
  { name: "台湾", value: 0, add: 41 },
  { name: "香港", value: 0, add: 42 },
  { name: "澳门", value: 0, add: 43 },
  { name: "十段线", value: 0, add: 44 },
  { name: "南海诸岛", value: 0, add: 45 },
];

//模拟后台获取统计数据
function getChartMapData(request, response) {
  response.$delay(500, {
    list: initDatas.map((r, index, arr) => {
      return {
        ...r,
        value: ((Math.random() * 100) | 0)
      }
      return r;
    }),
  });
}

export default {
  mixins: [
    // 地图统计数据数据源
    dataSource("chartData", post("/api/mock").mockData(getChartMapData), {
      dataField: "list",
    }),
  ],

  computed: {
    useChartData() {
      const _newDatas =
        this.chartData.formatDatas.length > 0
          ? this.chartData.formatDatas
          : initDatas;
      if (this.chartDv.transforms && this.chartDv.transforms.length > 0) {
        return this.chartDv.source(_newDatas);
      }
      return this.chartDv.source(_newDatas);
    },
    useChartBackDv() {
      return this.chartBackDv.source(ChinaGeoData, {
        type: "GeoJSON",
      });
    },
  },
  watch: {
    "chartData.store.datas": function () {
      this.$nextTick(() => {
        this.userChartView.changeData(this.useChartData.rows);
        this.userChartView.parent.render(true)
      });
    },
  },
  data() {
    return {
      tooltipData: {},
    };
  },
  created() {
    const ds = new DataSet();
    // 地图背景
    this.chartBackDv = ds.createView("back");
    // 地图y业务统计数据
    this.chartDv = ds
      .createView("chart")
      .source(initDatas)
      .transform({
        geoDataView: this.useChartBackDv,
        field: "name",
        type: "geo.region",
        as: ["longitude", "latitude"],
      })
      .transform({
        type: "map",
        callback: (obj) => {
          //如果需要转换数据,可以在这里处理
          return obj;
        },
      });
    // 背景图片地址
    this.bgJpg = "url(" + bgJpg + ")";
  },
  components: { ProDataChart },
  methods: {
    updateData() {
      this.chartData.loadDatas();
    },
    createChartOption({ chart, data, attrs }) {
      //g2 tooltip el
      const tooltipContentEl =
        this.tooltipContentEl ||
        (this.tooltipContentEl = this.$refs.charttooltip.childNodes[0]);
      const that = this;
      //同步多view的scal
      chart.scale({
        longitude: {
          sync: true,
        },
        latitude: {
          sync: true,
        },
      });
      //禁用axis
      chart.axis(false);
      //设置 legend位置
      chart.legend("value", {
        position: "left-bottom",
      });

      //配置tooltip
      chart.tooltip({
        shared: false,
        showMarkers: false,
        title: "name",
        customContent: function (title, data) {
          that.$nextTick(() => {
            that.tooltipData = {
              title,
              data,
            };
          });
          return tooltipContentEl;
        },
      });

      // 背景
      const worldMapView = chart.createView({});
      worldMapView.data(this.useChartBackDv.rows);
      worldMapView
        .polygon()
        .tooltip(false)
        .position("longitude*latitude")
        .style({
          fill: "#fff",
          fillOpacity: 0,
          stroke: "#1e93ff",
          lineWidth: 1,
        });
      worldMapView.legend(false);
      worldMapView.tooltip(false);

      // 统计图
      const userView = (this.userChartView = chart.createView());
      userView.data(this.useChartData.rows);
      userView
        .polygon()
        .state({
          active: {
            style: {
              fill: "#efd632",
              cursor: "pointer",
            },
          },
        })
        .position("longitude*latitude")
        .color(
          "value",
          ["#0053f3", "#14aff6", "#3eb1e5", "#79cffd", "#60c7fe"].reverse()
        )
        .style({
          fillOpacity: 0.85,
          stroke: "#3399ff",
        })
        .animate({
          leave: {
            animation: "fade-out",
          },
        });
      userView.interaction("element-active");
    },
  },
};
</script>

<style>
</style>